<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-19 15:26:24
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-04 19:02:29
-->
<template>
    <div class="container">
        <div class="echarts" ref="main" id="main"></div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {}
    },
    methods: {
        //农作物总面积占比请求
        requestOn() {
            this.$axios.get('/api/TotalAreaCropsProportion').then(res => {
                // console.log(res);
                if (res.status === 200) {
                    var seriesDate = res.data.map(item => {
                        return {
                            name: item.name,
                            value: item.value
                        }
                    })
                }
                this.option = {
                    title: {
                        text: '农作物总面积占比',
                        left: 10,
                        top: 15
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['50%', '63%'], //圆心位置
                            radius: '50%',  //外圆半径 
                            data: seriesDate,
                            label: { //设置文本样式
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bolder'
                            }
                        },

                    ],
                    tooltip: {
                        show: true
                    },
                    legend: {  //图列组件
                        show: true,
                        icon: 'rect', //直径
                        left: '2%',
                        top: '15%'
                    },
                }
                this.myEschars.setOption(this.option)
            })
        },
        screen() {
            this.myEschars.resize()
            const width = document.getElementById('main').offsetWidth;
            const num = width / 100 * 3.5;
            this.option = {
                title: {
                    textStyle: { fontSize: num }
                }
            }
            this.myEschars.setOption(this.option)
        },
        init() {
            const oDiv = this.$refs.main
            this.myEschars = this.$echarts.init(oDiv, this.theme)
        }

    },
    mounted() {
        this.init()
        //农作物总面积占比请求
        this.requestOn()
        // this.screen()
        window.addEventListener('resize', this.screen)

    },
    deactivated() {
        window.removeEventListener('resize', this.screen)
    },
    watch: {
        theme() {
            this.myEschars.dispose()
            this.init()
            this.requestOn()
        }
    },
    computed: {
        ...mapGetters({
            theme: 'home/theme'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>